<template>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="班级课表" name="first">
            <div class="header" style="width: 90%;">
                <el-select v-model="semesterId" clearable placeholder="请选择学期">
                    <el-option v-for="item in semesterOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="gradeId" clearable placeholder="请选择年级">
                    <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="classId" clearable placeholder="请选择班级">
                    <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" plain @click="pitchTable">查询课表</el-button>
                <el-button type="primary" plain @click="exportTable">导出课表</el-button>
            </div>
            <div class="timetable">
                <TimeTable :afternoon-length="4" :length="10" :events="events1"></TimeTable>
            </div>
        </el-tab-pane>
        <el-tab-pane label="老师课表" name="second">
            <div class="header">
                <el-select v-model="semesterId" clearable placeholder="请选择学期">
                    <el-option v-for="item in semesterOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="gradeId" clearable placeholder="请选择年级">
                    <el-option v-for="item in gradeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="classId" clearable placeholder="请选择班级">
                    <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="classId" clearable placeholder="请选择老师">
                    <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" plain @click="pitchTable">查询课表</el-button>
                <el-button type="primary" plain @click="exportTable">导出课表</el-button>
            </div>
            <div class="timetable">
                <h2>老师课表</h2>
                <TimeTable :afternoon-length="4" :length="10" :events="events1"></TimeTable>
                <h2>班级课表</h2>
                <TimeTable :afternoon-length="4" :length="10" :events="events1"></TimeTable>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>
  
<script>
import TimeTable from '@/components/TimeTable';

export default {
    name: 'GradePage',
    components: {
        TimeTable
    },
    data() {
        return {
            msg: '课表',
            schoolId: '',
            semesterId: '',
            gradeId: '',
            classId: '',
            classOptions: [],
            gradeOptions: [],
            semesterOptions: [],
            activeName: 'first',
            events1: [
                {
                    xq: 5,
                    title: '形势与政治',
                    class: 'sport',
                    content: '5-6节' + '/' + '社会学1班' + '/' + '5教-402室',
                    start: 5,
                    end: 6
                }
            ],
        }
    },
    methods: {
        // 查询学期
        async getSchedule() {
            let res = await this.$axios.post(
                `http://39.105.215.62:8200/semester/searchSemester?pageSize=1000&pageNum=1&schoolId=${this.schoolId}`
            );
            console.log(res);
            let infoData = res.data.records.map(item => {
                if (item.semester == '1') {
                    item.semester_name = "上学期"
                } else if (item.semester == '2') {
                    item.semester_name = "下学期"
                }
                return item;
            })
            infoData.sort((a, b) => {
                if (a.academicYear != b.academicYear) {
                    return b.academicYear - a.academicYear;
                } else {
                    return a.semester - b.semester
                }
            })
            console.log(infoData);
            this.semesterOptions = infoData.map(item => {
                return { value: item.id, label: item.academicYear + '/' + item.semester_name }
            })
            // 查询年级
            let result = await this.$axios.post(`http://39.105.215.62:8200/grade/findGrades?pageNum=1&pageSize=100`, { gradeId: "", gradeName: "", schoolId: this.schoolId });
            console.log(result);
            this.gradeOptions = result.data.records.map(item => {
                return { value: item.id, label: item.gradeName }
            })
            // 查询班级
            let gradeObj = result.data.records.filter(item => { item.id == this.gradeId })
            let ClassRes = await this.$axios.post(`http://39.105.215.62:8200/class/selectClasses?pageSize=100&pageNum=1`, { schoolId: this.schoolId, gradeId: this.gradeId == '' ? 0 : gradeObj.gradeId });
            console.log(ClassRes);
            this.classOptions = ClassRes.data.records.map(item => {
                return { value: item.id, label: item.className }
            })
        },
        // 查询课表
        async pitchTable() {
            console.log('schoolId', this.schoolId);
            console.log('semesterId', this.semesterId);
            console.log('gradeId', this.gradeId);
            console.log('classId', this.classId);
            let res = await this.$axios.post(`http://39.105.215.62:8500/timetable/getClassTimeTable`, { schoolId: this.schoolId, semesterId: this.semesterId, gradeId: this.gradeId, classId: this.classId });
            console.log(res);
            if (res.data.length == 0) {
                this.events1 = []
            } else {
                // {
                //     xq: 5,
                //     title: '形势与政治',
                //     class: 'sport',
                //     content: '5-6节' + '/' + '社会学1班' + '/' + '5教-402室',
                //     start: 5,
                //     end: 6
                // }
                this.events1 = res.data.map(item => {
                    return {
                        xq: item.week,
                        title: item.courseName,
                        start: item.day,
                        content: '',
                        end: item.day
                    }
                })
            }
        },
        // 导出课表
        exportTable() {

        }
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        this.$emit("transfer", this.msg);
        this.schoolId = JSON.parse(sessionStorage.getItem('info')).schoolId;
        await this.getSchedule()
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
</style>
  